<!--  -->
<template>
  <div>

  {{ dateValue }}
    <ELTable v-bind="tableConfig">


      <!-- 条件搜索 -->
      <template #search="{searchSubmit,params}">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="楼栋">
             <el-cascader clearable @change="(e:any)=>cascaderChange(e,params)" :props="cascaderProps" v-model="cascaderValue" :options="buildings"  />
          </el-form-item>
          <el-form-item label="账期">
            <el-date-picker
        v-model="dateValue"
        @change="(e:any)=>dateChange(e,params)"
        value-format="YYYY-MM-DD"
        type="daterange"
        range-separator="至"
        start-placeholder="起始日期"
        end-placeholder="截止日期"
      />
            
          </el-form-item>


          <el-form-item label="房号">
            <el-input v-model="params.houseno" placeholder="请输入房间号" clearable />
          </el-form-item>

          <el-form-item>
              <el-button type="primary" @click="searchSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
      </template>

      <!-- 操作按钮 -->
      <template #buttons="{ deleteAllHandle }">
        <el-button type="primary">添加</el-button>
        <el-button @click="deleteAllHandle" type="danger">删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)">修改</el-button>
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>

      <template #date="{ scope }">
        <div>
          {{ fromatDate(scope.row.date) }}
        </div>
      </template>

      <template #begindate="{ scope }">
        <div>
          {{ scope.row.begindate}}至{{scope.row.enddate}}
        </div>
      </template>

    </ELTable>
  </div>
</template>

<script lang='ts' setup>
import ELTable, { TableType } from '../../components/ELTable.vue';
import { reactive, toRefs, ref, onMounted } from 'vue'
import { getList, del, deleteAll } from '../../service/fee/fee'
import { getBuildingList } from '../../service/building/building';
import moment from 'moment';
import {columns} from './columns'
const fromatDate = (val: string) => {

  return moment(val).format("YYYY年MM月DD日")
}
//楼栋

const cascaderProps={label:'name',value:'id',checkStrictly:true};
const cascaderValue=ref("");
const buildings=ref([]);

const getBuildingData=async ()=>{
  const res:any=await getBuildingList(null);
  if(res.errCode===10000){
    buildings.value= res.data.list;
  }

}
const cascaderChange=(e:any,params:any)=>{

  if(!e) params.buildingid=null;
  else{
    params.buildingid=e[e.length-1];
  }
 
  
}

//日期选择器
const dateValue=ref("");
const dateChange=(e:any,params:any)=>{
  if(e==null){
    params.begindate=null;
    params.enddate=null;
  }
  else{
    params.begindate=e[0];
    params.enddate=e[1];
  }

}

const tableConfig = reactive<TableType>({
  loadData: getList,
  delete: del,
  deleteAll: deleteAll,
  columns
})

//修改
const edit = (val: any) => {

  alert("修改");
  console.log(val);

}
onMounted(()=>{

  getBuildingData();
})

</script>
<style scoped></style>